<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>项目管理后台</title>
<link rel="stylesheet" href="js/layui/css/layui.css" />
<script type="text/javascript" src="js/layui/layui.js"></script>
</head>
<!--修改表单-->
<div id="Updatadiv" style="display: none;">

	<form class="layui-form" lay-filter="editfm" action="">
		<div class="layui-form-item" style="display: none;">
			<label class="layui-form-label">id</label>
			<div class="layui-input-inline">
				<input type="id" id="id" name="id" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">项目名</label>
				<div class="layui-input-inline">
					<input type="projectName" id="projectName" name="projectName"
						readonly="readonly" lay-verify="required" autocomplete="on"
						class="layui-input">
				</div>
			</div>
		</div>

		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">项目发布状态</label>
				<div class="layui-input-inline">
					<select id="status" name="status" lay-verify="required">
						<option value="">请选择状态</option>
						<option value="1">开发状态</option>
						<option value="2">构建镜像</option>
						<option value="3">部署镜像</option>
					</select>
				</div>
			</div>
		</div>

		<!--修改提交操作按钮-->
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit="" id="editbtn"
					lay-filter="editdemo">立即修改</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>
</div>
<body>
	<!--全局弹出层的样式和颜色-->
	<style>
body .demo-class .layui-layer-title {
	background: #c00;
	color: #fff;
	border: none;
}
</style>
<body>
	<!--搜索form表单-->
	<form class="layui-form" action="" method="post"
		onsubmit="return false;">
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">项目编号</label>
				<div class="layui-input-inline" style="width: 100px">
					<input type="text" name="txtusername" id="txtusername"
						autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<div class="layui-input-inline" style="width: 100px;">
					<button class="layui-btn" id="search" data-type="reload">搜索</button>
				</div>
			</div>
		</div>
	</form>


	<table class="layui-hide" id="table1" lay-filter="demo"></table>
	<!--首先创建一个隐藏的table-->
	<script type="text/html" id="toolbarDemo"><!--头部工具栏 ，添加按钮-->
<div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm layui-icon layui-icon-add-1" lay-event="add">添加</button>
</div>
</script>
	<script type="text/html" id="barDemo"><!--行内工具栏，操作按钮-->
<a class="layui-btn layui-btn-xs layui-icon layui-icon-edit" lay-event="edit">编辑</a>
<a class="layui-btn  layui-btn-danger layui-btn-xs layui-icon layui-icon-delete" lay-event="del">删除</a>
</script>

	<script>
		var server_url = "..";

		layui.use([ "table", "jquery", "layer", "form", "transfer" ],
				function() {
					var table = layui.table;//声明table
					var index;//声明标记
					var $ = layui.$;//声明jquery
					var layer = layui.layer;//声明layer
					var form = layui.form;//声明form
					var transfer = layui.transfer;//声明要用穿梭框

					//第一个实例，方法级渲染  ，使api的数据渲染到table表格中
					table.render({
						elem : '#table1'//获取table对象
						,
						url : server_url + '/search'//链接数据接口
						,
						toolbar : '#toolbarDemo'//头部工具栏
						,
						method : 'get'//提交方式
						// ,autoSort: false // 禁用自动排序
						,
						cols : [ [//表头
						{
							field : 'id',
							title : 'id',
							hide : true
						}, {
							field : 'projectNo',
							title : '项目编号',
							width : 150,
							sort : true,
							fixed : 'left'
						}, {
							field : 'projectName',
							title : '项目名',
							width : 150
						}, {
							field : 'projectVersion',
							title : '版本号',
							width : 120
						}, {
							field : 'status',
							title : '发布状态',
							width : 120,
							templet : function(d) {
								if (d.status == '1') {
									return '开发状态';
								} else if (d.status == '2') {
									return '构建镜像';
								} else if (d.status == '3') {
									return '部署镜像';
								}
							}
						}, , {
							field : 'gitUrl',
							title : '仓库地址',
							width : 320
						}, {
							field : 'gitPath',
							title : 'Pom路径',
							width : 120
						}, {
							field : 'serverName',
							title : '部署机器',
							width : 120
						}, {
							fixed : 'right',
							title : '操作',
							toolbar : '#barDemo',
							width : 150
						} ] ],
						id : 'demoReload'//给table唯一标识
						,
						page : true
					//开启分页
					});

					//第二个实例 ，执行搜索框事件
					active = {
						reload : function() {
							var txtusername = $("#txtusername").val();
							table.reload("demoReload", {
								where : {
									projectNo : txtusername
								}
							})
						}
					}

					//检索按钮
					$('#search').on('click', function() {
						var type = $(this).data('type');//获取按钮里面data-type的值
						active[type] ? active[type].call(this) : '';//如果触发检索则刷新table
					});

					//设置全局弹出层的样式
					layer.config({
						skin : 'demo-class'
					})

					//第三个实例，头工具栏事件     添加事件     demo指的是table里面lay-filter的值
					table.on('toolbar(demo)', function(obj) {
						//obj.event指头部工具栏 的lay-event的值
						switch (obj.event) {
						case 'add':
							index = layer.open({
								title : '添加用户',
								type : 2,
								content : [ 'createProject.html', 'no' ],//这里content是一个URL，如果你不想让iframe出现滚动条，
								skin : 'demo-class', //给单个弹出层设置样式                        //你还可以content: ['http://sentsin.com', 'no']
								resize : false,//是否允许拉伸
								area : [ '600px', '500px' ]
							//宽高的设置
							});

							break;
						}
						;
					});

					//第四个实例，监听工具条，监听编辑和删除
					table.on('tool(demo)', function(obj) {
						var data = obj.data;
						if (obj.event === 'del') {//lay-event="del"时执行删除事件
							layer.confirm('真的删除行么', function(index) {
								$.ajax({
									type : "get",
									url : server_url + '/delete',
									data : {
										id : data.id
									},
									//dataType:'json',
									success : function(res) {
										if (res) {
											layer.msg('删除成功')
											obj.del();
											layer.close(index);
										} else {
											layer.msg('删除失败')
										}
									}
								});
							});
						} else if (obj.event === 'edit') {//lay-event="del"时执行编辑事件
							//回显数据   需要设置form里面的name值为所接值得属性  editfm指的是lay-filter的值
							//alert(data)
							form.val("editfm", data);
							layer.open({
								type : 1,
								title : "修改用户",
								area : [ "400px", "400px" ],
								content : $("#Updatadiv")
							})

						}
					});
					form.on('submit(editdemo)', function() {

						var id = $('#id').val();
						var status = $('#status').val();
						$.ajax({
							type : "get",
							url : server_url + '/edit',
							data : {
								id : id,
								status : status
							},
							// dataType:'json',
							success : function(res) {
								if (res) {
									layer.msg('修改成功');
								} else {
									layer.msg('修改失败');
								}
							}
						});
					})

				});
	</script>

</body>
</html>
